<template>
    <div class="cart">
        <el-dialog :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
            <el-table :data="detailList" border stripe>
                <el-table-column type="index" align="center" :index="indexMethod" width="40"></el-table-column>
                <el-table-column prop="imgPath" label="图片" width="140">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgPath" alt="" width="100">
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="名称" width="120"> </el-table-column>
                <el-table-column prop="author" label="作者" width="80"> </el-table-column>
                <el-table-column prop="press" label="出版社" width="175"> </el-table-column>
                <el-table-column prop="price" label="价格" width="80"> </el-table-column>
                <el-table-column prop="date" label="出版日期" width="140"> </el-table-column>
            </el-table>
        </el-dialog>
        <el-table ref="multipleTable" :data="carts" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" class="carttab">
            <el-table-column type="selection" width="60" checked="true"></el-table-column>
            <el-table-column type="index" align="center" label="序号" :index="indexMethod" width="80"></el-table-column>
            <el-table-column prop="product.imgPath" label="图片" width="140">
                <template slot-scope="scope">
                    <img :src="scope.row.product.imgPath" alt="" width="80%">
                </template>
            </el-table-column>
            <el-table-column label="名称" width="120">
                <template slot-scope="scope">
                    <el-button type="text" @click="getDetail(scope.row.product)">{{ scope.row.product.productName
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="product.price" label="单价" width="100"> </el-table-column>
            <el-table-column prop="product.num" label="数量" width="210" style="display:flex;justify-content:space-around;">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleAdd(scope.row)">+</el-button>
                    <input type="text" name="" id="" v-model="scope.row.num" style="width: 55px;margin:0 5px"
                        class="numInput">
                    <el-button size="mini" type="danger" @click="handleMinus(scope.row)">-</el-button>
                </template>
            </el-table-column>
            <el-table-column width="190">
                <template slot="header" slot-scope="scope">
                    <span>操作</span>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row :gutter="20" class="cartjiesuan" v-if="carts.length > 0">
            <el-col :span="12">
                <div class="grid-content">
                    <el-button type="danger" size="mini" class="" icon="el-icon-delete" @click="clear">清空购物车</el-button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>总计:￥{{ TotalPrice }}元</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button size="mini" type="primary" @click="toOrder">去结算</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- router-view用于显示user下一级路由组件的显示 -->
        <router-view></router-view>
    </div>
</template>

<script src="../assets/js/CartView.js"></script>
<style src="../assets/css/CartView.css" scoped></style>